<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端调试页面</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
            background: #f0f0f0;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            background: white; 
            padding: 20px; 
            border-radius: 8px; 
        }
        .status { 
            padding: 10px; 
            margin: 10px 0; 
            border-radius: 4px; 
        }
        .success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .info { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
        button { 
            background: #007bff; 
            color: white; 
            border: none; 
            padding: 8px 16px; 
            border-radius: 4px; 
            cursor: pointer; 
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        #results { 
            background: #f8f9fa; 
            border: 1px solid #dee2e6; 
            padding: 15px; 
            border-radius: 4px; 
            white-space: pre-wrap; 
            font-family: monospace;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI数据库管理系统 - 前端调试</h1>
        
        <div class="status info">
            <strong>调试说明：</strong>
            <br>如果Vue应用无法正常显示，请使用这个页面来测试前端和后端的连接。
        </div>

        <h3>🔧 后端连接测试</h3>
        <button onclick="testBackendHealth()">测试后端健康检查</button>
        <button onclick="testChatAPI()">测试聊天API</button>
        <button onclick="testSystemAPI()">测试系统API</button>

        <h3>🎯 Vue应用调试</h3>
        <button onclick="checkVueDependencies()">检查Vue依赖</button>
        <button onclick="testLocalStorage()">检查本地存储</button>
        <button onclick="checkConsoleErrors()">检查控制台错误</button>

        <h3>📊 测试结果</h3>
        <div id="results">点击上面的按钮开始测试...</div>
    </div>

    <script>
        function log(message, type = 'info') {
            const results = document.getElementById('results');
            const timestamp = new Date().toLocaleTimeString();
            results.textContent += `[${timestamp}] ${message}\n`;
            console.log(message);
        }

        function clearLog() {
            document.getElementById('results').textContent = '';
        }

        async function testBackendHealth() {
            log('🔍 测试后端健康检查...');
            try {
                const response = await fetch('http://localhost:8080/api/chat/health');
                const text = await response.text();
                log(`✅ 后端健康检查成功: ${response.status} - ${text}`, 'success');
            } catch (error) {
                log(`❌ 后端健康检查失败: ${error.message}`, 'error');
            }
        }

        async function testChatAPI() {
            log('🔍 测试聊天API...');
            try {
                const response = await fetch('http://localhost:8080/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        sessionId: 'test-session',
                        question: '测试连接',
                        includeDetails: false
                    })
                });
                const data = await response.json();
                log(`✅ 聊天API测试成功: ${JSON.stringify(data, null, 2)}`, 'success');
            } catch (error) {
                log(`❌ 聊天API测试失败: ${error.message}`, 'error');
            }
        }

        async function testSystemAPI() {
            log('🔍 测试系统API...');
            try {
                const response = await fetch('http://localhost:8080/api/system/health');
                const data = await response.json();
                log(`✅ 系统API测试成功: ${JSON.stringify(data, null, 2)}`, 'success');
            } catch (error) {
                log(`❌ 系统API测试失败: ${error.message}`, 'error');
            }
        }

        function checkVueDependencies() {
            log('🔍 检查Vue相关依赖...');
            
            // 检查Vue是否加载
            if (typeof window.Vue !== 'undefined') {
                log('✅ Vue已加载');
            } else {
                log('❌ Vue未加载');
            }

            // 检查Element Plus
            if (typeof window.ElementPlus !== 'undefined') {
                log('✅ Element Plus已加载');
            } else {
                log('❌ Element Plus未加载');
            }

            // 检查路径别名
            log('📁 当前页面URL: ' + window.location.href);
            log('📁 当前域名: ' + window.location.origin);
        }

        function testLocalStorage() {
            log('🔍 检查本地存储...');
            try {
                localStorage.setItem('test', 'value');
                const value = localStorage.getItem('test');
                localStorage.removeItem('test');
                log('✅ 本地存储正常工作');
            } catch (error) {
                log(`❌ 本地存储异常: ${error.message}`, 'error');
            }
        }

        function checkConsoleErrors() {
            log('🔍 检查控制台错误...');
            log('请打开浏览器开发者工具 (F12) 查看Console标签页的错误信息');
            log('常见错误类型:');
            log('- 模块加载失败');
            log('- CORS跨域错误');
            log('- 404资源未找到');
            log('- Vue组件错误');
        }

        // 页面加载时自动运行一些检查
        window.onload = function() {
            log('🚀 前端调试页面已加载');
            log('请先测试后端连接，然后检查Vue应用问题');
        };
    </script>
</body>
</html>